<template>
  <div class="managerlist">
    <div class="managerlist-head">
      <el-button
        @click="handleAddmanager"
        icon="Plus"
        v-if="$store.state.role === 2"
        >添加管理员</el-button
      >
      <el-button @click="getdata">
        <el-icon><Refresh /></el-icon>
      </el-button>
    </div>
    <el-table :data="managerlist" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="adminname" label="账号名" />
      <el-table-column prop="role" label="角色">
        <template #default="{ row }">
          <el-tag type="success">
            {{ row.role === 1 ? "管理员" : "超级管理员" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="handleEdit(row)">编辑</el-button>
          <el-button @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev, pager, next,"
        :total="tableData.length"
        v-model:current-page="page"
        v-model:page-size="pageSize"
      />
    </div>
    <el-drawer v-model="drawer">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="adminname">
          <el-input v-model="formData.adminname" />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="formData.password" />
        </el-form-item>
        <template v-if="$store.state.role === 2">
          <el-form-item prop="role" label="角色">
            <el-select v-model="formData.role">
              <el-option value="1" label="管理员" />
              <el-option value="2" label="超级管理员" />
            </el-select>
          </el-form-item>
          <el-form-item prop="checkedKeys" label="权限">
            <el-tree
              ref="reftree"
              :data="treelist"
              node-key="name"
              show-checkbox
              :props="defaultProps"
              default-expand-all
            />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="handleadd" v-if="type === 1">新增</el-button>
        <el-button @click="handleupde" v-else>修改</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import {
  getmanagerdata,
  delmanager,
  addmanager,
  updatemanager,
  getemanager,
} from "../../api/users";
import { routes } from "@/router";
import { getChildrenByName, isIncludes, getarr } from "@/utils";
import { fn } from "../../../test";
export default {
  data() {
    return {
      tableData: [], //完整数据
      // 当前页
      page: 1,
      // 每页显示条数
      pageSize: 8,
      drawer: false, //抽屉的显示与隐藏
      formData: {
        adminname: "",
        password: "",
        role: "",
        checkedKeys: [],
      },
      type: 1, //1--添加管理   2--编辑管理
      formRules: {
        //表单校验规则
        adminname: [{ required: true, message: "必填" }],
        password: [{ required: true, message: "必填" }],
        role: [{ required: true, message: "必填" }],
      },
      treelist: [], //树状列表数据
      defaultProps: {
        // children 就是每一个节点的子节点是什么字段，默认值就是 children
        children: "children",
        // label 就是每一个节点用来展示文案的字段，默认值就是 label
        label: "lable",
      },
    };
  },

  methods: {
    //获取完整数据
    getdata() {
      getmanagerdata().then((data) => {
        this.tableData = data.data;
        console.log("获取管理员列表", data);
      });
    },
    //获取树状列表数据
    gettreelist() {
      this.treelist = routes.filter((item) => !item.hidden);
      console.log(this.treelist);
    },
    //编辑操作  获取单个管理员信息   并显示抽屉  将模式改为修改
    handleEdit(row) {
      // console.log(row);
      this.type = 2;
      this.drawer = true;
      getemanager(row.adminname).then((data) => {
        console.log(data);
      });
      this.formData.adminname = row.adminname;
      // this.formData.password = row.password;
      this.formData.password = "";
      this.formData.role = row.role + "";
      // 上面三个字段，是跟页面做了双向数据绑定的，所以是OK的。
      // 这里的 checkedKeys 需要我们通过别的方式去勾选。
      this.formData.checkedKeys = row.checkedKeys;

      this.$nextTick(() => {
        console.log(row.checkedKeys, "=====");
        // this.$refs.reftree.setCheckedKeys(row.checkedKeys);
        // this.$refs.reftree.setCheckedNodes(row.checkedKeys);
        // this.$refs.reftree.setChecked(row.checkedKeys, true);
        let roles = row.checkedKeys;
        // let arr = roles.filter((role) => {
        //   let children = getChildrenByName(routes, role);
        //   if (children.length) {
        //     return isIncludes(children, roles);
        //   } else {
        //     return true;
        //   }
        // });
        let arr = getarr(routes, roles);
        // console.log(arr);
        if (this.$store.state.role === 2) {
          this.$refs.reftree.setCheckedKeys(arr);
        }

        let arr1 = fn(roles, routes);
        console.log(arr1);
      });
    },
    //删除单个管理员
    handleDelete(row) {
      console.log(row);
      delmanager(row.adminname).then((data) => {
        console.log(data);
        this.getdata();
      });
    },
    //添加管理员   显示抽屉  将模式改为新增 重置表单数据
    handleAddmanager() {
      this.drawer = true;
      this.type = 1;

      this.formData.adminname = "";
      this.formData.password = "";
      this.formData.role = "";
      this.formData.checkedKeys = [];
    },
    //真正的添加管理员
    async handleadd() {
      try {
        //进行表单校验
        await this.$refs.formRef.validate();
        const list1 = this.$refs.reftree.getCheckedKeys();
        const list2 = this.$refs.reftree.getHalfCheckedKeys();
        // console.log(list1);
        // console.log(list2);
        this.formData.checkedKeys = [...list1, ...list2];
        console.log(this.formData.checkedKeys);

        addmanager(this.formData).then((data) => {
          console.log(data);
          this.getdata();
          this.drawer = false;
        });
      } catch (error) {}
    },
    //修改单个管理员信息
    async handleupde() {
      try {
        await this.$refs.formRef.validate();
        //获取全选的列表
        const list1 = this.$refs.reftree.getCheckedKeys();
        //获取半选的列表
        const list2 = this.$refs.reftree.getHalfCheckedKeys();
        // console.log(list1);
        // console.log(list2);
        this.formData.checkedKeys = [...list1, ...list2];
        console.log(this.formData.checkedKeys);

        updatemanager(this.formData).then((data) => {
          console.log(data);
          this.getdata();
          this.drawer = false;
        });
      } catch (error) {}
    },
  },
  computed: {
    //分页所需的数据
    managerlist() {
      return this.tableData.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
  },
  mounted() {
    this.getdata();
    this.gettreelist();
    // const controller = new AbortController();
    // console.log(controller);
    // console.log(controller.abort());
  },
};
</script>

<style lang="scss" scoped>
.managerlist {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pagination,
.managerlist-head {
  padding: 10px 0;
  display: flex;
  justify-content: flex-end;
}
.el-table {
  flex: 1;
}
</style>
